
//获取url地址。取出id
/**
 *   从local Storage中获取数据 
 *   渲染用户头像和昵称
 */
function doShowUser() {
    let linshiStr = localStorage.getItem('LINSHI')
    let data = JSON.parse(linshiStr)
    if (data) {
        showUser(data)
    }

}

doShowUser()

function showUser(data) {
    let userbox = document.querySelector('.userImg')
    let topStr = `<img src=${data[0].headerimg} alt="" />
    <p>${data[0].username}欢迎您</p>`
    userbox.innerHTML = topStr
}

/**
 * 实现退出页面功能
 */

function doOutPage() {
    let outBtn = document.querySelector('#outPage')
    outBtn.addEventListener('click', function () {
        localStorage.removeItem('LINSHI')
        alert('退出账号成功！')
    })
}
doOutPage()
/**
 * 购物车跳转功能
 */
function doGoshoppingcart() {
    let gosc = document.querySelector('.shoppingCartBtn')
    gosc.addEventListener('click', function () {
        let cart = localStorage.getItem('LINSHI')
        if (cart) {
            location.href = "shoppingCart.html"
        } else {
            alert('请您先登录哦')
        }
    })
}
doGoshoppingcart()

function getUrlId() {
    let url = location.href
    let id = url.substring(url.length - 2, url.length)
    return id
}

//根据id 从后端获取相应的数据

function doLink() {
    let id = getUrlId()
    myPromise({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/find',
        data: {
            id
        }
    }).then(function (data) {
        console.log(data);
        if (data.resultCode == 1) {
            let ProductDetail = data.resultInfo
            showProductDetail(ProductDetail)
            doAddGoods(ProductDetail)
        }
    })
}
function showProductDetail(ProductDetail) {
    let detailStr = `    <div class="left-box fl">
<div class="show-box">
    <img src="${ProductDetail.picture}" alt="111">
     <!-- 遮罩层 -->
    <div class="mask"></div>
</div>

<!-- 选项卡小图片 -->
<ul>
    <li class="active" data-index="0"><img src="${ProductDetail.list[0]}" alt=""></li>
    <li data-index="1"><img src="${ProductDetail.list[1]}" alt=""></li>
    <li data-index="2"><img src="${ProductDetail.list[2]}" alt=""></li>
    <li data-index="3"><img src="${ProductDetail.list[3]}" alt=""></li>
    <li data-index="4"><img src="${ProductDetail.list[4]}" alt=""></li>
</ul>

<!-- 放大镜呈现的效果大图 -->
<div class="right-box">
    <img src="${ProductDetail.picture}" alt="">
</div>
</div> 
<!-- 右--文本内容介绍 -->
<div class="right-content fr">
<div class="right-content-top">
    <img src="../static/images/detail01.png" alt="">
    <img src="../static/images/detail02.png" alt="">
    <h3>${ProductDetail.shop}</h3>
</div>
<div class="right-content-price">
    <div class="cost-price">原价￥${ProductDetail.oldprice}</div>
    <h2><span>折扣价:</span>￥ ${ProductDetail.price} <span>100人已买</span></h2>
</div>
<div class="taobao">加入购物车</div>
</div>`



    let detailShopStr = `  <h3>————卖家信息————</h3>
<img src="${ProductDetail.picture}" alt="">
<p>店铺名</p>

<ul class="">
    <li>
        <span>描述</span>
        <span>4.8</span>
    </li>
    <li>
        <span>服务</span>
        <span>4.8</span>
    </li>
    <li>
        <span>物流</span>
        <span>4.8</span>
    </li>

</ul>`

    //     // 详情页大图片渲染
    //     picStr = `<img src="${ProductDetail.list[0]}" alt="">
    // <img src="${ProductDetail.list[1]}" alt="">
    // <img src="${ProductDetail.list[2]}" alt="">
    // <img src="${ProductDetail.list[3]}" alt="">
    // <img src="${ProductDetail.list[4]}" alt="">`

    $('.pro_detail_lf').html(detailStr)
    $('.shop').html(detailShopStr)
    // $('#img-box .container').html(picStr)
    onTabGlass(ProductDetail)
    onGlass(ProductDetail)

}
/**放大镜核心功能 */
function onGlass(ProductDetail) {
    // 移入显示遮罩层
    $('.show-box').mouseover(function () {
        $(".mask").show()
        $('.right-box').show()
    })

    // 移出隐藏遮罩层
    $('.show-box').mouseout(function () {
        $(".mask").hide()
        $('.right-box').hide()

    })

    // --移动遮罩层
    $('.show-box').mousemove(function (e) {
        e = e || window.event

        let x = e.offsetX - ($(".mask").width()) / 2
        let y = e.offsetY - ($(".mask").height()) / 2
        //边界设置
        if (x < 0) {
            x = 0
        }
        if (x > $('.show-box').width() - $(".mask").width()) {
            x = $('.show-box').width() - $(".mask").width()
        }
        if (y < 0) {
            y = 0
        }
        if (y > $('.show-box').height() - $(".mask").height()) {
            y = $('.show-box').height() - $(".mask").height()
        }
        $(".mask").css({
            left: x + 'px',
            top: y + 'px',
        })

        /**
         * 放大镜
         *     遮罩层mask          放大镜 .right
         * ----------------   =  --------------------
         *  显示图片showbox        放大镜里的大图
         */
        $('.right-box>img').width(($('.right-box').width() * $('.show-box').width()) / $('.mask').width())
        $('.right-box>img').height(($('.right-box').height() * $('.show-box').height()) / $('.mask').height())

        // ------放大镜里的大图移动距离
        /**
          遮罩层移动距离        遮罩层
         ------------   =  ------------
          背景图片移动距离      放大镜

          背景图片移动距离 =  遮罩层移动距离*放大镜/遮罩层
        **/
        let moveX = (x * $('.right-box').width() / $('.mask').width())
        let moveY = (y * $('.right-box').height() / $('.mask').width())
        $('.right-box>img').css({
            left: -moveX + 'px',
            top: -moveY + 'px'
        })
    })

}

/**
 * 切换放大镜图片
 *  功能:  选中小图，显示图片和背景图片切换为小图对应图片
 *        1. 给小图片绑定事件
 *            1.1 循环遍历每个小图，设置事件
 *            1.2 事件委托，给它父元素设置事件
 *        2. 选中小图设置选中样式active
 *            设置之前先清掉所有小图选中样式active
 */
function onTabGlass(ProductDetail) {
    $('.left-box li').click(function () {
        // 清除所有小图样式
        $('.left-box li').removeClass('active')
        $(this).addClass('active')
        let index = $(this).attr('data-index')
        $('.show-box img').attr('src', `${ProductDetail.list[index]}`)
        $('.right-box img').attr('src', `${ProductDetail.list[index]}`)
    })

}

/** 加入购物车功能实现 */
function doAddGoods(ProductDetail) {
    let data = ProductDetail
    let addBtn = document.querySelector('.taobao')

    addBtn.addEventListener('click', function () {
        let cart = localStorage.getItem('LINSHI')
        if (cart) {
            let goodsListStr = localStorage.getItem('ProductList')
            let goodsList = JSON.parse(goodsListStr) || []

            let id = data.id
            let url = data.picture
            let price = data.price
            let msg = data.shop
            product = {
                id,
                url,
                msg,
                price,
                num: 1,
                singlePrice: 0
            }
            let juProduct = goodsList.find(function (item) {
                return item.id == product.id
            })
            console.log(juProduct);
            if (juProduct) {
                juProduct.num++
            } else {
                goodsList.push(product)
            }
            localStorage.setItem('ProductList', JSON.stringify(goodsList))
            alert('添加成功!')
        } else {
            alert('请您先登录哦')
        }

    })
}

doLink()
